import * as echarts from "echarts";
const Xecharts = {}
// 求温度值的最大值
function getWaterMax(list, isMin, isArr = false) {
	// console.log(list, 'listlistlist', isArr)
	let MaxYdataArr = []
	let isMaxOrMin = isMin ? 'min' : 'max'
	if (list.length == undefined) {
		MaxYdataArr = list.data
	} else {
		if (list) list.map(v => {
			let MaxYdata = Math[isMaxOrMin].apply(null, v.data.map(v2 => {
				if (v2 && v2.value) {
					return (v2 && v2.value == '未知') ? 0 : v2.value
				} else {
					return v2 || 0
				}
			}))
			MaxYdataArr.push(MaxYdata)
		})
	}

	// 判断最大值的时候 还有 与参考值 对比 如果 数据中的最大值小于 参考值 将最大值设为 参考值 1.5倍 
	// 最小值 也一样 减小1.5倍
	// if(list&&list[0]&& list[0].referenceValue){
	// 	MaxYdataArr.push(Math.floor(list[0].referenceValue*1.5))
	// }
	// console.log(MaxYdataArr, list,isMin, 'MaxYdataArrMaxYdataArr')
	return list ? Math[isMaxOrMin].apply(null, MaxYdataArr) : 0
}

var getMax = function (arr, max) {
	// console.log(arr,!arr,arr.length == 0 , !arr.data, (arr.data&&arr.data.length==0),'----arr');
	// 先判断 arr是 数组 还是 对象 
	if (!arr) {
		return 0
	}
	if (Array.isArray(arr)) {
		if (arr.length == 0) return 0
	} else {
		if (!arr.data || (arr.data && arr.data.length == 0)) return 0
	}
	// if (!arr||arr.length == 0 || !arr.data || (arr.data&&arr.data.length==0)) {
	// 	console.log('*****');

	// 	return 0
	// }
	let newArr = [];
	arr.forEach(item => {
		newArr = newArr.concat(item.data)
	})
	// 求最大值
	let arr2 = newArr.filter(item => {
		return !isNaN(item)
	})
	return Math.max(...arr2) || 0
}
var getMin = function (arr, min) {
	// 先判断 arr是 数组 还是 对象 
	if (!arr) {
		return 0
	}
	if (Array.isArray(arr)) {
		if (arr.length == 0) return 0
	} else {
		if (!arr.data || (arr.data && arr.data.length == 0)) return 0
	}
	let newArr = [];
	arr.forEach(item => {
		newArr = newArr.concat(item.data)
	})
	// 求最大值
	let arr2 = newArr.filter(item => {
		return !isNaN(item)
	})

	return Math.min(...arr2) || 0
}
Xecharts.Xecharts_Zhu = function (obj) {
	if (!obj) obj = {
		text: '总运行时长：7时32分',
		Xdata: ['周一', '周二', '周三', '周四', '周五'],
		list: [{
			name: '大火',
			data: [120, 132, 101, 134, 90],
			color: ['#FFE5E4', '#FBBEC5']
		}]
	}
	let arr = []

	let legendArr = []
	obj.list.map(v => {
		if (v.xDetail) obj.Xdata = v.xDetail
		if (v.noShow == true) return false
		arr.push({
			name: v.name,
			type: 'bar',
			data: v.data || v.yDetail,
			itemStyle: {
				barBorderRadius: obj.barBorderRadius || 10,
			},
			barWidth: obj.barWidth || 10,
			// 自定义变量，以数组形式传递渐变参数
			linearGradient: [0, 0, 0, 1,
				[{
						offset: 0,
						color: v.color[0]
					},
					{
						offset: 1,
						color: v.color[1]
					},
				]
			]
		})
		legendArr.push(v.name)
	})
	let option = {

		color: obj.color || ['#73A0FA', '#73DEB3', '#FFB761'],
		title: obj.text ? {
			text: obj.text,
			textStyle: {
				color: "#1A1E32",
				fontSize: '12',
			},
			left: 20,
			top: '4'
		} : null,
		notMerge: true, // 自定义变量：true代表不合并数据，比如从折线图变为柱形图则需设置为true；false或不写代表合并
		tooltip: {
			backgroundColor: 'rgba(15, 35, 72, 0.5)',
			textStyle: {
				color: '#fff'
			},
			trigger: 'axis',
			positionStatus: true,
			formatter: function (params) {
				if (obj.tooltipFormatter) {
					let str = [params[0].axisValue];
					params.forEach(item => {
						str.push(item.seriesName + ':' + obj.tooltipFormatter(item.value))
					})
					return str.join('\n')
				} else {
					let txt = ''
					params.forEach((v, i) => {
						txt +=
							`\n${params[i].seriesName }${obj.xName||''}：${params[i].value}${obj.unit||'度'}`
					})
					return `${params[0].name}${txt}`
				}

			}
		},
		legend: obj.legend == null ? null : {
			right: 20,
			top: '4',
			width: '80%',
			data: legendArr
		},
		grid: {
			left: '5%',
			right: '8%',
			bottom: '5%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			data: obj.Xdata || [1, 2, 3, 4, 5],
			axisLine: {
				lineStyle: {
					color: '#F0EFF4'
				}
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				textStyle: {
					color: '#0F2348'
				}
			},
		},
		yAxis: {
			type: 'value',
			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				textStyle: {
					color: '#8791A3'
				}
			},
			splitLine: {
				lineStyle: {
					color: '#F0EFF4',
				}
			},
		},
		series: arr
	}
	return option
}
Xecharts.Xecharts_rowZhu = function (obj) {
	if (!obj) {
		obj = {
			Xdata: ['大米', '玉米', '蔬菜', '鸡蛋', '坚果'],
			name: '管损率',
			text: '日平均管损率：',
			avarNum: 30,
			Ydata: [50, 22, 10, 50, 1],
			unit: '%'
		}

	}
	let arr = []
	obj.Ydata.map(v => {
		arr.push(100)
	})
	obj.arr = arr
	let option = {
		backgroundColor: '#fff',
		grid: {
			left: '5%',
			right: '5%',
			bottom: '5%',
			top: '10%',
			containLabel: true
		},
		title: {
			text: obj.text + obj.avarNum + '%',
			textStyle: {
				color: "#1A1E32",
				fontSize: '12',
			},
			left: '20',
			top: '4'
		},
		tooltip: {
			axisPointer: {
				type: 'none'
			},
			backgroundColor: 'rgba(15, 35, 72, 0.5)',
			textStyle: {
				color: '#fff'
			},
			trigger: 'axis',
			positionStatus: true,
			formatter: function (params) {
				let txt = ''
				params.forEach((v, i) => {
					if (params[i].seriesName != '背景') {

						txt +=
							`\n${params[i].seriesName }${obj.xName||''}：${params[i].value}${obj.unit||'度'}`
					}
				})
				setTimeout(() => {

					return `${params[0].name}${txt}`
				}, 1000)
			}
		},
		xAxis: {
			show: false,
			type: 'value'
		},
		legend: {
			right: 20,
			top: '4',
			width: '80%',
			data: [obj.name]
		},
		yAxis: [{
			type: 'category',
			inverse: true,
			axisLabel: {
				show: true,
				textStyle: {
					color: '#8890A4'
				},
			},
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
			data: obj.Xdata
		}],
		series: [{
				name: obj.name,
				type: 'bar',
				// zlevel: 1,
				itemStyle: {
					normal: {
						barBorderRadius: [0, 30, 30, 0],
						// color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
						// 	offset: 0,
						// 	color: '#FFD5E7'
						// }, {
						// 	offset: 1,
						// 	color: '#FF86C1'
						// }]),
					},
				},
				label: {
					normal: {
						show: true,
						position: 'right', // top, right, inside, insideTop,...
						textStyle: {
							color: '#FF85C0',
							fontSize: 12
						},
						formatter: '{c}' + "%"
					}
				},
				barWidth: 15,
				data: obj.Ydata
			},
			{
				name: '背景',
				type: 'bar',
				barWidth: 15,
				barGap: '-100%',
				data: obj.arr,
				itemStyle: {
					normal: {
						color: 'rgba(0, 0, 0, 0.01)',
						barBorderRadius: [0, 30, 30, 0],
					}
				},
			},
		]
	};
	return option
}


Xecharts.Xecharts_line_en = function (arrData, Xdata, Yname, legend, formatterFn) {
	// console.log(arrData, Xdata, Yname, legend);
	if (arrData[0] && arrData[0].referenceValue) arrData.forEach(v => {
		v.markLine = {
			symbol: 'none',
			label: {
				show: false,
			},
			data: [{
				yAxis: arrData[0].referenceValue,
			}]
		}
	})
	// 计算 grid的 左侧距离 5位数 为15%  getWaterMax(arrData, false, true)
	function getGridL() {

		let newArrData = []
		arrData.map(v => {
			v.data.map(v2 => {
				newArrData.push(Math.abs(v2))
			})
		})
		let a = getWaterMax([{
			data: newArrData
		}], false, true)
		// let a = getWaterMax(arrData, false, true)
		if (a) {

			let b = Math.floor(String(a).split('.')[0].length * 30 / 3)
			// console.log(b,String(a),String(a).length,'++++++++++');
			if (b < 30) {
				return 35
			} else {
				return b + 10
			}

		} else {
			return 35
		}
	}

	function getYMax() {
		let maxN = getWaterMax(arrData, false, true)
		let referenceValue = arrData[0].referenceValue
		// console.log(maxN,referenceValue,arrData,'-------------------------------');
		if (maxN) {
			if (referenceValue) {
				if (referenceValue > maxN) {
					return referenceValue * 1.5
				} else {
					return null
				}

			} else {
				null
			}
		} else {
			if (referenceValue) {
				return referenceValue * 2
			} else {
				return 100
			}
		}
	}
	//option
	let option = {
		title: {
			text: Yname,
			textStyle: {
				color: '#000',
				fontSize: 14,
				fontWeight: 400
			},
			// left: 10,
			left: "3%",
			// left: 0,
			top: 0
		},
		grid: [{
			// left: 30,
			left: getGridL(),
			// left: '15%',
			right: 35,
			// right: 25,
			top: 30,
			height: 150
		}],
		tooltip: {
			//移动端展示方式
			trigger: 'axis',
			transitionDuration: 0,
			confine: true,
			borderRadius: 4,
			positionStatus: true,
			backgroundColor: 'rgba(0,0,0,0.5)',
			textStyle: {
				fontSize: 12,
				color: '#fff'

			}
		},
		xAxis: {
			data: Xdata,
			axisLine: {
				lineStyle: {
					color: '#CACDD6'
				}
			},
			axisLabel: {
				show: true,
				textStyle: {
					color: '#333'
				}
			},
		},
		yAxis: {
			// name:Yname,
			type: 'value',
			gridIndex: 0,
			// splitNumber:8,
			min: getWaterMax(arrData, true, true) >= 0 ? 0 : null,
			max: getYMax(),
			// max: getWaterMax(arrData, false, true)?null:100,
			// max: getWaterMax(arrData, false, true) || 100,
			// nameTextStyle: {
			// 	color: '#000',
			// 	fontSize: 14,
			// 	left: 0,
			// 	top: 10,
			// },
			nameTextStyle: {
				color: '#000',
				fontSize: 14,
				fontWeight: 400
			},
			minInterval: 1,
			axisLine: {
				show: false,
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				show: true,
				interval: 0,
				color: '#909399'
			},
		},
		// dataZoom: [{
		// 		type: 'inside',
		// 		realtime: true,
		// 		fillerColor: "rgba(203, 229, 204, 1)",
		// 		backgroundColor: "#ffffff",
		// 		handleSize: '140%',
		// 		start: 0,
		// 		end: 100,
		// 		zoomOnMouseWheel:false,
		// 		preventDefaultMouseMove: true,
		// 	},
		// 	{
		// 		show: true,
		// 		type: 'slider',
		// 		height: 16,
		// 		top: 210,
		// 		start: 0,
		// 		end: 100,
		// 		handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
		// 		handleSize: '105%'
		// 	}
		// ],
		series: arrData,
	};

	// console.log(legend)
	// debugger
	if (legend) option.legend = legend

	// console.log(option,JSON.stringify(option),'Xecharts_line_enXecharts_line_en')
	return option
}

// 测试柱状图
Xecharts.Xecharts_ceshi = function (obj) {
	let option = {
		backgroundColor: '#fff',
		grid: {
			bottom: 80,
			left: 60,
			right: 25,
		},
		xAxis: {
			data: obj.XData,
			axisLine: {
				lineStyle: {
					color: '#ccc'
				}
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				color: '#000',
				fontSize: 12,
				// interval:0,
				// rotate:-90,
			}
		},
		yAxis: {
			name: obj.yAxisName || "耗电量(Kw·h)",
			nameTextStyle: {
				color: '#000',
				fontSize: 14,
				left: 0,
			},
			// type:'log',
			axisLine: {
				show: false,
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				color: '#ccc',
				fontSize: 14
			},
			splitLine: {
				// show:false,
				lineStyle: {
					color: '#ccc'
				}
			},
			minInterval: 1,

		},
		tooltip: {
			//移动端展示方式
			trigger: 'axis',
			transitionDuration: 0,
			confine: true,
			borderRadius: 4,
			//   borderWidth: 1,
			//   borderColor: '#333',
			backgroundColor: 'rgba(0,0,0,0.5)',
			formatter: '{b} ：{c}',
			textStyle: {
				fontSize: 12,
				color: '#fff'

			},
		},
		// dataZoom: [{
		// 		type: 'inside',
		// 		realtime: true,
		// 		fillerColor: "rgba(203, 229, 204, 1)",
		// 		backgroundColor: "#ffffff",
		// 		handleSize: '140%',
		// 		start: 0,
		// 		end: 100,
		// 		preventDefaultMouseMove: false,
		// 	},
		// 	{
		// 		show: true,
		// 		type: 'slider',
		// 		bottom: 10,
		// 		height: 16,
		// 		start: 0,
		// 		end: 100,
		// 		handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
		// 		handleSize: '105%'
		// 	}
		// ],
		series: [{
			type: obj.type || 'bar',
			barWidth: 15,
			itemStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: '#2979ff'
					}, {
						offset: 1,
						color: '#2979ff'
					}], false)
				}
			},
			label: {
				normal: {
					show: false,
					fontSize: 14,
					fontWeight: 'bold',
					color: '#2979ff',
					position: 'top',
					formatter: function (params) {
						return (params.value == 0) ? '' : params.value;
					},
				}
			},
			connectNulls: true,
			data: obj.YData || [254, 3254, 1654, 2454, 4757, 2011, 1211]
		}]
	};
	return option
}
//堆叠柱状图
Xecharts.Xecharts_groupBar = function (echartObj) {
	function accAdd(arg1, arg2) {
		var r1, r2, m;
		try {
			r1 = arg1.toString().split(".")[1].length
		} catch (e) {
			r1 = 0
		}
		try {
			r2 = arg2.toString().split(".")[1].length
		} catch (e) {
			r2 = 0
		}
		m = Math.pow(10, Math.max(r1, r2))
		return parseFloat(((arg1 * m + arg2 * m) / m).toFixed(3));
	}
	let option = {
		title: {
			text: echartObj.text,
			textStyle: {
				color: "#1A1E32",
				fontSize: '12',
			},
			left: 20,
			top: '4'
		},
		legend: {
			data: echartObj.legend || [],
			top: 20
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		axisLine: {
			show: false,
		},
		axisTick: {
			show: false
		},
		axisLabel: {
			show: true,
			interval: 0,
			color: '#909399'
		},
		xAxis: [{
				type: 'category',
				data: echartObj.XData || echartObj.xdata || [],
				axisLine: {
					lineStyle: {
						color: '#CACDD6'
					}
				},
				axisLabel: {
					show: true,
					textStyle: {
						color: '#333'
					}
				},
			},

		],
		yAxis: {
			type: 'value',
			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				textStyle: {
					color: '#8791A3'
				}
			},
			splitLine: {
				lineStyle: {
					color: '#F0EFF4',
				}
			},
			min: getMin(echartObj.series) ? null : 0,
			max: getMax(echartObj.series) > 0 ? null : 10
		},
		series: echartObj.series && echartObj.series.map(v => {
			if (!v.barMaxWidth) {
				v.barMaxWidth = 32
			}
			return v
		}),
		tooltip: {
			backgroundColor: "rgba(255,255,255,1)",
			borderRadius: 4,
			confine: true,
			padding: 5,
			textStyle: {
				color: "#404040",
				fontSize: 12
			},
			transitionDuration: 0,
			trigger: "axis",
			formatter: function (params) {
				var relVal = params[0].name;
				relVal += `<div style='width:auto;'>`;
				let sum = 0;
				for (var i = params.length - 1; i >= 0; i--) {
					let isName = '';
					let noName = params[i].value == undefined ? '-' : params[i].value;
					relVal +=
						`<div style='display:flex;align-items: center;'>
								<span style='display:inline-block;border-radius:10px;width:10px;height:10px;margin-right:5px;background-color:${params[i].color};'></span>
								<span style='display:inline-block;'>${params[i].seriesName} <span style="padding-left:10px">${(isName || noName)}</span></span></div>`;
					if (params[i].value) {
						sum = accAdd(sum, params[i].value)
					}
				}
				if (params.length > 1) {
					relVal +=
						`<div style='display:flex;align-items: center;'>
								<span style='display:inline-block;border-radius:10px;width:10px;height:10px;margin-right:5px;'></span>
								<span style='display:inline-block;'>总计<span style="padding-left:12px">${Number(sum)}</span></span></div>`;
				}
				relVal += `</div>`;
				return relVal;
			}
		},
		color: echartObj.colors || ['#F65F54', '#E5AE40', '#65B168', '#4F91FF', '#33A9A9', '#787885', '#FF7011'],
	}
	return option
}
// 单个的折线图
Xecharts.Xecharts_line = function (obj) {
	var option = {
		// backgroundColor: '#fff',
		// title: {
		// 	text: obj.text,
		// 	textStyle: {
		// 		color: "#1A1E32",
		// 		fontSize: '12',
		// 	},
		// 	left: 20,
		// 	top: '4'
		// },
		color: obj.color || ['#73A0FA', '#73DEB3', '#FFB761'],
		tooltip: {
			trigger: 'axis'
		},
		grid: {
			left: '25',
			right: '25',
			bottom: '24',
			top: '75',
			containLabel: true
		},
		// legend: {
		// 	data: ['订单总笔数', '钱包笔数', '借呗笔数'],
		// 	orient: 'horizontal',
		// 	icon: "rect",
		// 	show: true,
		// 	left: 20,
		// 	top: 25,
		// },
		xAxis: {
			type: 'category',
			data: obj.xdata,
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
		},
		yAxis: {

			min: getMin([{
				data: obj.data
			}]) ? null : 0,
			max: getMax([{
				data: obj.data
			}]) > 0 ? null : 100,
			type: 'value',
			axisLabel: {
				color: '#999',
				textStyle: {
					fontSize: 12
				},
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: '#F3F4F4'
				}
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
		},
		series: [{
			name: obj.name,
			type: 'line',
			// smooth: true,
			data: obj.data
		}]
	};
	console.log(option, getMax([{
		data: obj.data
	}]) > 0 ? null : 100, '=8989');

	return option
}


// 分组列
Xecharts.Xecharts_groupLine = function (echartObj) {
	let option = {
		backgroundColor: echartObj.backgroundColor || '',
		title: echartObj.text ? {
			text: echartObj.text,
			textStyle: {
				color: "#1A1E32",
				fontSize: '16',
			},
			left: 20,
			top: '8%'
		} : null,
		tooltip: {
			trigger: 'axis',
		},
		grid: {
			left: '25',
			right: '25',
			bottom: '25',
			top: '60',
			containLabel: true
		},
		axisLine: {
			show: false,
		},
		axisTick: {
			show: false
		},
		axisLabel: {
			show: true,
			interval: 0,
			color: '#909399'
		},
		xAxis: [{
				type: 'category',
				data: echartObj.XData || echartObj.xdata,
				axisLine: {
					lineStyle: {
						color: '#CACDD6'
					}
				},
				axisLabel: {
					show: true,
					textStyle: {
						color: '#333'
					}
				},
			},

		],
		yAxis: {
			type: 'value',
			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				formatter: echartObj.yAxisFormatter || `{value}`,
				textStyle: {
					color: '#8791A3'
				}
			},
			splitLine: {
				lineStyle: {
					color: '#F0EFF4',
				}
			},
			min: getMin(echartObj.series) ? null : 0,
			max: getMax(echartObj.series) > 0 ? null : 10
		},
		series: echartObj.series,
		color: echartObj.color || Xecharts.color, //主题色
	}
	console.log(echartObj.series)
	if (echartObj.legend) {
		option.legend = echartObj.legend
	}
	if (echartObj.tooltipFormatter) {
		option.tooltip.formatter = echartObj.tooltipFormatter
	}
	return option
}

// 联通demo上的单个折线图
Xecharts.Xecharts_signleLine = function (obj) {
	var option = {
		backgroundColor: obj.backgroundColor || '',
		title: obj.text ? {
			text: obj.text,
			textStyle: {
				color: "#1A1E32",
				fontSize: '16',
			},
			left: 20,
			top: '8%'
		} : null,
		color: obj.color || Xecharts.color,
		legend: obj.legend || null,
		tooltip: {
			trigger: 'axis',
		},
		grid: {
			left: '25',
			right: '25',
			bottom: '25',
			top: '60',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			data: obj.xdata,
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
		},
		connectNulls: true, //是否连接空数据
		yAxis: {
			type: 'value',
			axisLabel: {
				color: '#999',
				textStyle: {
					fontSize: 12
				},
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: '#F3F4F4'
				}
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
		},
		series: [{
			name: obj.name,
			type: 'line',
			data: obj.data,
			smooth: obj.smooth ? obj.smooth : false
		}]
	};
	return option
}
// 环状  饼状图 
// 联通demo上的单个折线图
Xecharts.ring_pie = function ({
	echartData
}) {
	let color = ['#F65F54', '#65B168', '#4F91FF', '#E5AE40', '#33A9A9', '#787885', '#ff7a8c'];
	// echartData = [{
	// 		name: "A类",
	// 		value: "3720"
	// 	},
	// 	{
	// 		name: "B类",
	// 		value: "2920"
	// 	},
	// 	{
	// 		name: "C类",
	// 		value: "2200"
	// 	},
	// 	{
	// 		name: "D类",
	// 		value: "1420"
	// 	}
	// ];

	let formatNumber = function (num) {
		let reg = /(?=(\B)(\d{3})+$)/g;
		return num.toString().replace(reg, ',');
	};

	var option = {
		color: color,
		legend: {
			orient: 'vertical',
			icon: 'rect',
			x: '60%',
			y: 'center',
			itemWidth: 12,
			itemHeight: 12,
			align: 'left',
			textStyle: {
				rich: {
					params: {
						fontSize: 12,
						width:70,
					},
					value: {
						fontSize: 16,
						padding: [0, 5, 0, 15],
					},
					unit: {
						fontSize: 12,
					},
				},
			},

			// formatter: function (name) {
			// 	let res = echartData.filter(v => v.name === name);
			// 	res = res[0] || {};
			// 	let unit = res.unit || '';
			// 	return '{name|' + name + '}  {value|' + res.value + '}{unit|' + unit + '}'
			// },
			formatter: function (params) {
				//超过十个字符就换行展示
				//                     return (name.length > 10 ? (name.slice(0,10)+"...") : name );
				var newParamsName = ""; // 最终拼接成的字符串
				var paramsNameNumber = params.length; // 实际标签的个数
				// var provideNumber = 10; // 每行能显示的字的个数
				var provideNumber = 7; // 每行能显示的字的个数
				var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整

				// 条件等同于rowNumber>1
				if (paramsNameNumber > provideNumber) {

					for (var p = 0; p < rowNumber; p++) {
						var tempStr = ""; // 表示每一次截取的字符串
						var start = p * provideNumber; // 开始截取的位置
						var end = start + provideNumber; // 结束截取的位置
						// 此处特殊处理最后一行的索引值
						if (p == rowNumber - 1) {
							// 最后一次不换行
							tempStr = params.substring(start, paramsNameNumber);
						} else {
							// 每一次拼接字符串并换行
							tempStr = params.substring(start, end) + "\n";
						}
						newParamsName += tempStr; // 最终拼成的字符串
					}
				} else {
					// 将旧标签的值赋给新标签
					newParamsName = params;
				}
				//将最终的字符串返回
				let res = echartData.filter(v => v.name === params);
				res = res[0] || {};
				let unit = res.unit || '';
				// return '{params|' + newParamsName + '}  {value|' + res.value +'}{unit|' + unit + '}'
				return '{params|' + newParamsName + '}  {value|' + res.value + '}{unit|' + unit + '}'
			},

			// data: legendName
		},
		tooltip: {
			show: true
		},
		series: [{
			type: 'pie',
			minAngle: 5,
			radius: ['45%', '60%'],
			center: ['30%', '50%'],
			data: echartData,
			hoverAnimation: false,
			itemStyle: {
				normal: {
					// borderColor: bgColor,
					borderWidth: 2
				}
			},
			labelLine: {
				normal: {
					length: 20,
					length2: 120,
					lineStyle: {
						color: '#e6e6e6'
					}
				}
			},
			label: {
				normal: {
					show: false,
					formatter: params => {
						return (
							'{icon|●}{name|' + params.name + '}{value|' +
							formatNumber(params.value) + '}'
						);
					},
					padding: [0, -100, 25, -100],
					rich: {
						icon: {
							fontSize: 16
						},
						name: {
							fontSize: 14,
							padding: [0, 10, 0, 4],
							color: '#666666'
						},
						value: {
							fontSize: 18,
							fontWeight: 'bold',
							color: '#333333'
						}
					}
				}
			},
		}]
	};
	return option
}

Xecharts.getWaterMax = getWaterMax
export default Xecharts